import './good.scss'

import { connect } from 'react-redux'

import React, { Component } from 'react'

import { addtoshoped } from "../redux/shop/action";
class Shopping extends Component {
  addshoped = (i) => {
    this.props.addshoped(i)
    this.props.history.push({ pathname: '/shoped' })
  }

  render() {
    return (
      <div className='index'>
        {

          this.props.list.map((item, index) => {
            return (
              <div key={item.id} className="good">
                <img src={item.img} alt="" />
                <p >{item.title}</p>
                <p>价格{item.price}</p>
                <div className='addshoped' onClick={() => { this.addshoped(item) }}>加入购物车</div>
              </div>
            )
          })
        }
      </div>
    )
  }
}



// 定义一个函数成为我们的connect第一个参数，用途为接受redux中的数据,作用将redux中的数据转换成props
const mapStateToProps = (state) => {
  return {
    list: state.list,

  }
}
// 将redux中的派发动作转换到props中
const mapDispatchToProps = function (dispatch) {
  return {
    addshoped: (i) => {
      dispatch(addtoshoped(i) )
    }
      

  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Shopping)